<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群聊</title>
    <link rel="stylesheet" href="./css/group.css">
    <link rel="stylesheet" href="./font-friends/iconfont.css">

</head>
<body>
<div class="container">
    <div class="extra">
        <img class="group-icon" src="./favicon.ico">
        <div onclick="goToMessage()" class="iconfont icon-xiaoxi-1"></div>
        <div onclick="goToFriends()" class="iconfont icon-icon_huabanfuben"></div>
        <div onclick="goToGroup()" class="green iconfont icon-qunliao"></div>
        <div onclick="goToPyq()" class="iconfont icon-pengyouquan"></div>
    </div>
    <div id="group-list" class="left">




    </div>
    <div class="right">
        <div onclick="popInvited()" id="..." style="display: none;cursor: pointer;right: 20px;font-size: 28px;position: absolute">...</div>
        <div id="title" class="title">


        </div>

        <div id="content" class="content">


        </div>

        <div class="send" onkeydown="handleKeyDown(event)">
            <textarea id="message-content"></textarea>
            <button onclick="send()" class="send-button">
                发送
            </button>
        </div>
        <div class="context-menu" id="contextMenu">
            <ul>
             <li>撤回消息</li>
            </ul>
        </div>

    </div>

</div>
<div id="invite" class="overlay" style="display: none;">
    <div style="max-height: 200px;width: 300px;background-color: white!important; padding: 20px;border-radius: 7px">
        <!-- 在这里遍历好友列表-->
        <div style="margin-bottom: 30px" id="invitedFriend">


        </div>

        <div>
            <button onclick="confirm()">确定</button>
            <button onclick="cancel()">取消</button>
        </div>
    </div>

</div>


<div id="messageBox" class="message-box"></div>

</body>
</html>
<script src="./js/group.js"></script>
